<template>
	<view class="app">
		<view>
			<scroll-view scroll-y :style="{height:scrollheight}">
				<view :class="active===item.id?'activeclass':''" class="title" v-for="item in imgcategoryArr" :key="item.id" @click="nav(item.id)">
					{{item.title}}
				</view>
			</scroll-view>
		</view>
		<view class="" v-if="length===0">
			暂无数据......
		</view>
		<view class="" v-else v-for="(item,index) in navArr" :key="index">
			<view class="">
				{{item.title}}
			</view>
			<image :src="item.img_url" mode=""></image>
			<view class="">
				{{item.zhaiyao}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgcategoryArr: [],
				navArr: [],
				active: 14,
				length: 0,
				scrollheight: ''
			}
		},
		onLoad() {
			this.getimgcategory()
			this.getheight()
		},
		methods: {
			// 获取屏幕的高
			getheight() {
				uni.getSystemInfo({
					success: (res) => {
						console.log(this)
						console.log(res.windowHeight);
						this.scrollheight = 750 / (res.windowHeight) * (res.windowHeight) *1.5 + 'rpx'
					},
					complete: (res) => {
						console.log(res.windowHeight);
						this.scrollheight = 750 / (res.windowHeight) * (res.windowHeight) * 1.5 + 'rpx'
					},
					fail() {
						console.log('失敗')
					}
				})
			},
			// 获取社区图片详情
			async getimgcategory() {
				const data = await uni.$http.get(`/getimgcategory`)
				// console.log(data)
				this.imgcategoryArr = data.message
			},
			async nav(id) {
				const data = await uni.$http.get(`/getimages/${id}`)
				console.log(data)
				this.length = data.message.length
				this.active = id
				// console.log(id)
				// console.log(this.active)
				this.navArr = data.message
			}
		}
	}
</script>

<style>
	.app {
		display: flex;
	}

	.title {
		overflow-y: hidden;
		height: 130rpx;
		line-height: 130rpx;
		border-bottom: 1px solid #C8C7CC;
		width: 200rpx;
		text-align: center;
	}

	.activeclass {
		background-color: red;
		color: white;
	}

	/* scroll-view{
	height: 1206rpx; 
	 overflow-y: hidden;
} */
</style>
